<template>
  <div class="dataVisualize-box">
    <div class="top-box">
      <div class="top-title">数据可视化</div>
      <el-tabs v-model="tabActive" class="demo-tabs">
        <el-tab-pane v-for="item in tab" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
      </el-tabs>
      <div class="dashboard">
        <el-card shadow="hover">
          <WindDirectionChart/>
        </el-card>

        <el-card shadow="hover">
          <WindSpeedChart/>
        </el-card>

        <el-card shadow="hover">
          <HumidityChart/>
        </el-card>

        <el-card shadow="hover">
          <TemperatureChart/>
        </el-card>

        <el-card shadow="hover">
          <SoilTemperatureChart/>
        </el-card>

        <el-card shadow="hover">
          <SoilHumidityChart/>
        </el-card>

        <el-card shadow="hover">
          <SoilECChart/>
        </el-card>

        <el-card shadow="hover">
          <IlluminanceChart/>
        </el-card>

        <el-card shadow="hover">
          <RainfallChart/>
        </el-card>

      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import WindDirectionChart from "@/views/DiseaseWarning/pages/DataVisualization/components/WindDirectionChart.vue";
import IlluminanceChart from "@/views/DiseaseWarning/pages/DataVisualization/components/IlluminanceChart.vue";
import TemperatureChart
  from "@/views/DiseaseWarning/pages/DataVisualization/components/TemperatureChart.vue";
import SoilHumidityChart from "@/views/DiseaseWarning/pages/DataVisualization/components/SoilHumidityChart.vue";
import SoilECChart from "@/views/DiseaseWarning/pages/DataVisualization/components/SoilECChart.vue";
import RainfallChart from "@/views/DiseaseWarning/pages/DataVisualization/components/RainfallChart.vue";
import WindSpeedChart from "@/views/DiseaseWarning/pages/DataVisualization/components/WindSpeedChart.vue";
import SoilTemperatureChart from "@/views/DiseaseWarning/pages/DataVisualization/components/SoilTemperatureChart.vue";
import HumidityChart from "@/views/DiseaseWarning/pages/DataVisualization/components/HumidityChart.vue";

const tabActive = ref(1);
const tab = [
  {label: "近24小时", name: 1},
  {label: "近七日", name: 2},
  {label: "近一月", name: 3},
  {label: "近三月", name: 4},
  {label: "近半年", name: 5},
  {label: "近一年", name: 6}
];
</script>

<style scoped lang="scss">
.dataVisualize-box {
  .top-box {
    @apply mb-4 py-4 px-6 bg-white;
  }

  .dashboard {
    @apply flex flex-wrap justify-between;
  }

  .el-card {
    @apply mb-4;
  }
}
</style>

